<template>
	<view>
		<view class="swiper">
			<u-swiper :list="productInfo.indexImg" height="440rpx" radius="0"></u-swiper>
		</view>
		<view style="height: 400rpx;"></view>
		<view class="card relative  u-m-l-32 u-m-r-32 u-p-t-20" style="height: 412rpx;" v-if="productInfo.type==0">
			<view class="flex align-center u-p-l-20 u-p-r-20">
				<view style="color: #FD002B;">
					<text class="text-bold  u-font-xs">￥</text>
					<text class="text-bold price">{{parseFloat(produnctInfoSku.salePrice).toFixed(2)}}</text>

				</view>
				<view class="u-m-l-32 u-font-24 text999 u-p-l-20 u-p-r-20 text-decoration: line-through;">
					原价￥{{parseFloat(produnctInfoSku.price).toFixed(2)}}</view>
			</view>
			<view class="u-font-32 text-bold u-font-24 u-p-l-20 u-p-r-20">
				{{productInfo.title}}
			</view>
			<view class="u-m-t-28 flex align-center justify-between u-p-l-20 u-p-r-20">
				<view class="flex align-center">
					<view class="u-m-r-16">选择</view>
					<view class="sku u-m-r-32" v-for="(sku,i) in produnctInfoSkuList" :key="i" :class="i==0?'cur':''"
						@click="handleChangeSku(i)">{{sku.unit}}</view>

				</view>
				<u-icon name="arrow-right" size="14"></u-icon>
			</view>

		</view>
		<view class="card relative  u-m-l-32 u-m-r-32 u-p-t-20" style="height: 270rpx;" v-else>
			<view class="flex align-center u-p-l-20 u-p-r-20">
				<view style="color: #FD002B;">
					<text class="text-bold  u-font-xs">￥</text>
					<text class="text-bold price">{{parseFloat(produnctInfoSku.salePrice).toFixed(2)}}</text>

				</view>
				<view class="u-m-l-32 u-font-24 text999 u-p-l-20 u-p-r-20 text-decoration: line-through;">
					原价￥{{parseFloat(produnctInfoSku.price).toFixed(2)}}</view>
			</view>
			<view class="u-font-32 text-bold u-font-24 u-p-l-20 u-p-r-20">
				{{productInfo.title}}
			</view>
			<view class="u-m-t-28 flex align-center justify-between u-p-l-20 u-p-r-20">
				<view class="flex align-center">
					<view class="u-m-r-16">选择</view>
					<view class="sku u-m-r-32" v-for="(sku,i) in produnctInfoSkuList" :key="i" :class="i==0?'cur':''"
						@click="handleChangeSku(i)">{{sku.unit}}</view>

				</view>
				<u-icon name="arrow-right" size="14"></u-icon>
			</view>

		</view>
		<view class="text-center u-p-t-50 u-p-b-20 text999">{{productInfo.type==0?'服务详情':"商品详情"}}</view>

		<u--image :src="item" mode="widthFix" v-for="(item,k) in productInfo.detailsInfoImage" :key="k" width="auto"
			height="auto" :showLoading="true"></u--image>
		<view style="margin-top:120rpx"></view>

	</view>
</template>

<script>
	import {
		getProductInfoDetails,
		addProductToShoppingCar
	} from '@/common/api/api.js'
	export default {
		data() {
			return {
				titleStyle: {
					color: '#ffffff'
				},
				isNavbar: true,
				content: '',
				productInfo: {},
				produnctInfoSkuList: [],
				produnctInfoSku: [],

			}
		},
		onLoad(options) {
			this.handleGetProductInfoDetails(options.id);
		},
		methods: {
			// 获取产品详情
			handleGetProductInfoDetails(id) {
				getProductInfoDetails({
					id: id
				}).then(res => {
					this.productInfo = res.data;
					this.productInfo.indexImg = JSON.parse(this.productInfo.indexImg);
					this.produnctInfoSkuList = this.productInfo.productSkuList;
					this.produnctInfoSku = this.produnctInfoSkuList[0];
					this.productInfo.detailsInfoImage = JSON.parse(this.productInfo.detailsInfo);
				})
			},
			// 选择规格
			handleChangeSku(i) {
				this.produnctInfoSku = this.produnctInfoSkuList[i];
			},
		},
		onPageScroll(e) {
			if (e.scrollTop > 20) {
				this.isNavbar = false;
				this.titleStyle.color = '#000';
			} else {
				this.isNavbar = true;
				this.titleStyle.color = '#fff';
			}
		}
	}
</script>

<style lang="scss">
	.swiper {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
	}

	.card {
		background: #FFFFFF;
		border-radius: 8rpx;
	}

	.relative {
		position: relative;
		z-index: 1;
	}

	.price {
		font-size: 42rpx;
	}

	.sku {
		width: auto;
		height: 64rpx;
		line-height: 64rpx;
		border-radius: 4rpx;
		opacity: 1;
		border: 2rpx solid #CCCCCC;
		text-align: center;
		color: #333333;
		padding: 0 10rpx;
	}

	.cur {
		background: #ECFFFE;
		color: #FF5B00;
		border: 2rpx solid #FF5B00;
	}

	.tag {
		width: auto;
		height: 116rpx;
		background: linear-gradient(90deg, #FAF3EC 0%, #FFFFFF 100%);
		border-radius: 0px 0px 8rpx 8rpx;
		padding-left: 20rpx;
		padding-top: 20rpx;
		// line-height: 58rpx;

		.text {
			font-size: 24rpx;
			color: #693510;
		}
	}

	.scroll {
		overflow: scroll;

		.goods {
			width: 494rpx;
			height: 144rpx;
			border-radius: 8rpx;
			border: 2rpx solid #EEEEEE;
		}
	}

	.tagsm {
		width: 126rpx;
		height: 46rpx;
		line-height: 46rpx;
		text-align: center;
		background: #F3F3F3;
		border-radius: 24rpx;
		font-size: 24rpx;
		color: #666666;
		margin-right: 16rpx;
	}

	.footer {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 20rpx 0;
		background-color: #ffffff;

		.btn-plain {
			width: 190rpx;
			height: 84rpx;
			line-height: 84rpx;
			text-align: center;
			border-radius: 8rpx;
			border: 2rpx solid #FF5B00;
			font-size: 26rpx;
			color: #FF5B00;
			margin-left: 136rpx;
		}

		.btn-fill {
			width: 190rpx;
			height: 84rpx;
			line-height: 84rpx;
			text-align: center;
			background: #FF5B00;
			border-radius: 8rpx;
			color: #ffffff;
			margin-left: 20rpx;
		}
	}
</style>